<template>
  <main class="mt40">
    <n-form
        ref="formPwdRef"
        :rules="rules"
        :model="model"
        label-placement="left"
        label-width="auto"
        :style="{ maxWidth: '340px'}">
      <n-form-item label="新密码:" path="password">
        <n-input v-model:value.trim="model.password" id="pwd" maxlength="16" placeholder="新密码"/>
      </n-form-item>
      <n-form-item label="确认密码:" path="newpassword">
        <n-input v-model:value.trim="model.newpassword" id="cpwd" maxlength="16" placeholder="确认密码"/>
      </n-form-item>
      <n-form-item label=" " class="mt10">
        <n-button round type="primary" @click="handleUpdatePassword">
          修改密码
        </n-button>
      </n-form-item>
    </n-form>
  </main>
</template>
<script setup>
const model = ref({
  password: "",
  newpassword: ""
})
const rules = ref({})
const formPwdRef = ref({})

const handleUpdatePassword = debounce(async () => {
  try {
    if (!model.value.password) {
      useMessage().error("请输入密码!")
      getDom("pwd").focus()
      return
    }
    if (!model.value.newpassword) {
      useMessage().error("请输入确认密码!")
      getDom("cpwd").focus()
      return
    }

    if (model.value.password != model.value.newpassword) {
      useMessage().error("两次输入密码不一致!")
      getDom("cpwd").focus()
      return
    }

    var password = model.value.password
    var newpassword = model.value.newpassword
    await useUpdateUserPasswordApi({password,newpassword})
    useMessage().success("修改密码成功，下次登录生效!")
  } catch (e) {
    useMessage().error(e.message)
    getDom("cpwd").focus()
  }

}, 500)
</script>